Change default theme to system theme (#3649)

functionzz · harmitgoswami · web-flow · commit 9cc73ef8f1a3 · 2025-05-22T16:25:09.000+02:00
Co-authored-by: harmitgoswami &lt;harmitgoswami@gmail.com&gt;
diff --git a/pontoon/base/migrations/0078_alter_userprofile_theme.py b/pontoon/base/migrations/0078_alter_userprofile_theme.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.17 on 2025-01-29 18:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("base", "0077_fix_android_newlines"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="userprofile",
+            name="theme",
+            field=models.CharField(
+                choices=[("dark", "Dark"), ("light", "Light"), ("system", "System")],
+                default="system",
+                max_length=20,
+            ),
+        ),
+    ]
diff --git a/pontoon/base/models/user_profile.py b/pontoon/base/models/user_profile.py
@@ -35,7 +35,7 @@ class Themes(models.TextChoices):
     theme = models.CharField(
         choices=Themes.choices,
         max_length=20,
-        default=Themes.DARK,
+        default=Themes.SYSTEM,
     )
 
     # External accounts
diff --git a/pontoon/base/static/css/dark-theme.css b/pontoon/base/static/css/dark-theme.css
@@ -1,6 +1,5 @@
 /* Dark Theme Variables */
-.dark-theme,
-.system-theme {
+.dark-theme {
   /* Main */
   --main-border-1: #4d5967;
   --moz-logo: url(../img/moz-logo-light.svg);
diff --git a/pontoon/base/static/css/style.css b/pontoon/base/static/css/style.css
@@ -666,7 +666,7 @@ header nav .right .sign-in-header button {
   background: transparent;
   border: 1.5px solid var(--status-translated);
   border-radius: 2px;
-  color: white;
+  color: var(--white-1);
   font-size: 14px;
   font-weight: 300;
   height: 40px;
diff --git a/pontoon/base/templates/django/base.html b/pontoon/base/templates/django/base.html
@@ -1,6 +1,7 @@
 {% load static %}
 {% load socialaccount %}
 {% load helpers %}
+{% load django_helpers %}
 <!doctype html>
 <html lang="en" dir="ltr">
   <head>
@@ -24,22 +25,14 @@
     <link rel="stylesheet" href="{% static 'css/boilerplate.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/style.css' %}" title="" type="text/css" />
     <link rel="stylesheet" href="{% static 'css/dark-theme.css' %}" title="" type="text/css" />
+    <link rel="stylesheet" href="{% static 'css/light-theme.css' %}" title="" type="text/css" />
 
     {% include "tracker.html" %}
-
-    {% block extend_css %}
-    <!-- Inlining CSS mitigates/prevents fouc. -->
-    <style>
-      body {
-         background: #333941;
-      }
-    </style>
-    {% endblock %}
     {% block extend_js %}
     {% endblock extend_js %}
   </head>
 
-  <body class="{% block class %}{% endblock %} dark-theme">
+  <body class="{% block class %}{% endblock %} {{ request|theme_class }}" data-theme="{{ user|user_theme }}">
     <header>
       <ul class="notification">
         {% for message in messages %}
diff --git a/pontoon/base/templatetags/django_helpers.py b/pontoon/base/templatetags/django_helpers.py
@@ -0,0 +1,30 @@
+from django import template
+
+
+# We must redefine user_theme and theme_class with a new decorator in order
+# to use them in a Django template, such as in django/base.html
+
+register = template.Library()
+
+
+@register.filter
+def user_theme(user):
+    """Get user's theme or return 'system' if user is not authenticated."""
+    if user.is_authenticated:
+        return user.profile.theme
+    return "system"
+
+
+@register.filter
+def theme_class(request):
+    """Get theme class name based on user preferences and system settings."""
+    theme = "system"
+    user = request.user
+
+    if user.is_authenticated:
+        theme = user.profile.theme
+
+    if theme == "system":
+        theme = request.COOKIES.get("system_theme", "system")
+
+    return f"{theme}-theme"
diff --git a/pontoon/base/templatetags/helpers.py b/pontoon/base/templatetags/helpers.py
@@ -54,23 +54,23 @@ def return_url(request):
 
 @library.global_function
 def user_theme(user):
-    """Get user's theme or return 'dark' if user is not authenticated."""
+    """Get user's theme or return 'system' if user is not authenticated."""
     if user.is_authenticated:
         return user.profile.theme
-    return "dark"
+    return "system"
 
 
 @library.global_function
 def theme_class(request):
     """Get theme class name based on user preferences and system settings."""
-    theme = "dark"
+    theme = "system"
     user = request.user
 
     if user.is_authenticated:
         theme = user.profile.theme
 
-        if theme == "system":
-            theme = request.COOKIES.get("system_theme", "system")
+    if theme == "system":
+        theme = request.COOKIES.get("system_theme", "system")
 
     return f"{theme}-theme"
 
diff --git a/translate/src/context/Theme.tsx b/translate/src/context/Theme.tsx
@@ -7,7 +7,7 @@ export const ThemeContext = createContext({
 
 export function ThemeProvider({ children }: { children: React.ReactElement }) {
   const [theme] = useState(
-    () => document.body.getAttribute('data-theme') || 'dark',
+    () => document.body.getAttribute('data-theme') || 'system',
   );
 
   const applyTheme = useTheme();

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ class Themes(models.TextChoices):`
`35`	`35`	`theme = models.CharField(`
`36`	`36`	`choices=Themes.choices,`
`37`	`37`	`max_length=20,`
`38`		`- default=Themes.DARK,`
	`38`	`+ default=Themes.SYSTEM,`
`39`	`39`	`)`
`40`	`40`
`41`	`41`	`# External accounts`